<template>
  <div>
    <div class="toptop" style>
      <div>
        <span>
          <span style="margin-right: 24px;">公司</span>
          <el-select v-model="companyId" placeholder="请选择">
            <el-option v-for="(item, index) in companyIdList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <el-button size="small" class="bottom_all" @click="savefrequency()">保存</el-button>
    </div>
    <div class="info" style="display: flex;">
      <div class="left">
        <div class="nav">
          <template v-for="(item, index) in leftList">
            <div :key="index" :style="'width:' + 100 / leftList.length + '%'" :class="item.value == leftIndex ? 'left-active' : ''" @click="changeindex(item.value)">{{ item.text }}</div>
          </template>
        </div>
        <!-- 数据 -->
        <div class="radio leftitem">
          <el-radio-group v-model="showleftitemId" @change="changeleft">
            <template v-for="(item, index) in leftitemList">
              <div :key="index" class="radio-bg">
                <el-radio :label="item.id">{{ item.name }}</el-radio>
              </div>
            </template>
          </el-radio-group>
        </div>
      </div>
      <div class="center"></div>
      <div class="right">
        <div class="items">
          <div class="item">
            <div class="item-title">检验类别</div>
            <div class="radio">
              <el-radio-group v-model="showleftId" @change="changeleftId">
                <template v-for="(item, index) in leftIdList">
                  <div :key="index" class="radio-bg">
                    <el-radio :label="item.id">{{ item.name }}</el-radio>
                  </div>
                </template>
              </el-radio-group>
            </div>
          </div>
          <div class="item-hr"></div>
          <div class="item">
            <div class="item-title">检测频率</div>
            <div class="radio">
              <el-radio-group v-model="rightId" @change="loading=true">
                <template v-for="(item, index) in rightIdList">
                  <div :key="index" class="radio-bg">
                    <el-radio :label="item.id">{{ item.itemName }}</el-radio>
                  </div>
                </template>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDicType } from "@/api/common.js";
import { getListByTypeId } from "@/api/common.js";
import {
  getFirmDetection,
  getTestFrequency,
  saveTestFrequency,
} from "@/api/basicConfig/CPYquality.js";
import { getcompany } from "@/api/common.js";
export default {
  data() {
    return {
      leftList: [
        {
          text: "原物料",
          value: 1,
        },
        {
          text: "强度等级",
          value: 2,
        },
      ],
      leftIndex: 1,
      leftitemList: [],
      leftitemId: "",
      showleftitemId: "",
      leftIdList: [],
      rightIdList: [
        {
          itemName: "不检验",
          id: "5cce1d1a37344ae0b0f60f2b8cb72425",
        },
        {
          itemName: "每车",
          id: "5cce1d1a37344ae0b0f60f2b8cb72435",
        },
        {
          itemName: "每2车",
          id: "5cce1d1a37344ae0b0f60f2b8cb72525",
        },
      ],
      companyId: "",
      companyIdList: [],
      loading: false,
      showleftId: "",
      rightId: "",
      leftId: "",
      id: "",
    };
  },
  created() {
    getcompany({ typeId: "19da56b9e85648059e3cf1e7da497da4" }).then((res) => {
      this.companyIdList = res.data;
      this.companyId = this.companyIdList[0].id;
    });
  },
  watch: {
    leftIndex: {
      handler() {
        let _this = this;
        switch (_this.leftIndex) {
          case 1: {
            getDicType({
              code: "MATname",
            }).then((res) => {
              _this.leftitemList = res.data.items.map((res) => {
                let obj = {
                  id: res.id,
                  name: res.itemName,
                };
                return obj;
              });
              _this.rightId = "";
              _this.leftId = "";
              _this.leftitemId = "";
              _this.showleftitemId = "";
              _this.leftIdList = [];
            });
            return;
          }
          case 2: {
            getListByTypeId({ typeId: 1 }).then((res) => {
              _this.rightId = "";
              _this.showleftId = "";
              _this.leftId = "";
              _this.leftitemId = "";
              _this.showleftitemId = "";
              _this.id = "";
              _this.leftIdList = [];
              _this.leftitemList = res.data;
            });
            return;
          }
        }
      },
      deep: false,
      immediate: true,
    },
    leftitemId() {
      if (
        this.companyId == "" ||
        this.leftIndex == "" ||
        this.leftitemId == ""
      ) {
        return;
      }
      let data = new Object();
      data.type = this.leftIndex;
      data.companyId = this.companyId;
      if (this.leftIndex == 1) {
        data.rawId = this.leftitemId;
      } else {
        data.strengthGradeId = this.leftitemId;
      }
      getFirmDetection(data).then((res) => {
        this.leftIdList = res.data;
        this.showleftId = "";
        this.rightId = "";
        this.leftId = "";
        this.id = "";
      });
    },
    companyId() {
      if (
        this.companyId == "" ||
        this.leftIndex == "" ||
        this.leftitemId == ""
      ) {
        return;
      }
      let data = new Object();
      data.type = this.leftIndex;
      data.companyId = this.companyId;
      if (this.leftIndex == 1) {
        data.rawId = this.leftitemId;
      } else {
        data.strengthGradeId = this.leftitemId;
      }
      getFirmDetection(data).then((res) => {
        console.log(res);
        this.loading = false;
        this.leftIdList = res.data;
        this.showleftId = "";
        this.rightId = "";
        this.leftId = "";
        this.id = "";
      });
    },
  },
  methods: {
    changeindex(a) {
      let _this = this;
      if (_this.loading) {
        this.$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            _this.savefrequency();
          })
          .catch(() => {
            _this.leftIndex = a;
            _this.loading = false;
          });
        return;
      }
      _this.leftIndex = a;
    },
    changeleftId() {
      let _this = this;
      if (_this.loading) {
        _this
          .$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "bottom_all_two",
            confirmButtonClass: "bottom_all",
            type: "warning",
          })
          .then(() => {
            _this.showleftId = _this.leftId;
            _this.savefrequency();
          })
          .catch(() => {
            _this.leftId = _this.showleftId;
            _this.getrightId();
            _this.loading = false;
          });
        return;
      }
      _this.leftId = _this.showleftId;
      _this.getrightId();
    },
    getrightId() {
      let _this = this;
      let data = new Object();
      data.type = _this.leftIndex;
      data.companyId = _this.companyId;
      data.qualityDetectionId = _this.leftId;
      if (_this.leftIndex == 1) {
        data.rawId = _this.leftitemId;
      } else {
        data.strengthGradeId = _this.leftitemId;
      }
      getTestFrequency(data).then((res) => {
        /*获取关联数据*/
        console.log(res.data);
        if (res.data) {
          _this.id = res.data.id;
          _this.rightId = res.data.frequencyId;
        } else {
          _this.id = "";
          _this.rightId = "";
        }
      });
    },
    changeleft() {
      let _this = this;
      if (_this.loading) {
        _this
          .$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "bottom_all_two",
            confirmButtonClass: "bottom_all",
            type: "warning",
          })
          .then(() => {
            _this.showleftitemId = _this.leftitemId;
            _this.savefrequency();
          })
          .catch(() => {
            _this.leftitemId = _this.showleftitemId;
            _this.loading = false;
          });
        return;
      }
      _this.leftitemId = _this.showleftitemId;
    },

    savefrequency() {
      let _this = this;
      if (this.companyId == "") {
        this.$message({
          message: "请选择公司",
          type: "warning",
        });
        return;
      }
      let data = new Object();
      data.type = _this.leftIndex;
      data.companyId = _this.companyId;
      data.qualityDetectionId = _this.leftId;
      data.frequencyId = _this.rightId;
      data.frequency = _this.rightIdList.find(function (obj) {
        return obj.id == _this.rightId;
      }).itemName;
      if (_this.leftIndex == 1) {
        data.rawId = _this.leftitemId;
      } else {
        data.strengthGradeId = _this.leftitemId;
      }
      if (_this.id !== "") {
        data.id = _this.id;
      }
      let arr = [];
      arr.push(data);
      saveTestFrequency(arr).then((res) => {
        console.log(res);
        _this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 24px;
  height: 100%;
}
.left {
  border: 1px solid rgba(225, 229, 237, 1);
  flex: 2;
  border-radius: 4px;
}
.nav {
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: #e1e5ed;
  color: #000000;
  > div {
    font-size: 12px;
    font-weight: bold;
    height: 48px;
    //width: 50%;
    @include discen;
    cursor: pointer;
  }

  .left-active {
    color: $bg_color;
    border-radius: 8px 8px 0px 0px;
    background: #ffffff;
  }
}
.radio-bg:hover .block {
  display: inline-block;
}
.block {
  display: none;
}
.active {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
  margin: 0 5px;
}
.none {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 5px;
  background: #808080;
}
.toptop {
  padding: 20px 20px 0 20px;
  @include discen_al;
  justify-content: space-between;
}
.info {
  height: 705px;
  padding: 20px;
}
.items {
  display: flex;
  height: 100%;
}
.item {
  flex: 1;
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  .item-title {
    color: #000000;
    background: #e1e5ed;
    font-size: 14px;
    @include discen;
    height: 56px;
    font-weight: bold;
  }
}
.el-radio {
  margin-right: 5px;
}
.radio {
  padding: 20px;
  .radio-bg {
    height: 28px;
  }
  i {
    color: #808080;
    margin-left: 5px;
  }
  i:hover {
    color: $bg_color;
  }
}
.item-hr {
  width: 20px;
  height: 20px;
}
.right {
  flex: 5;
  border-radius: 4px;
}
.radio {
  overflow: auto;
  padding: 20px;
  height: calc(100% - 56px);
  .radio-bg {
    height: 28px;
  }
}
.radio::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.radio::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.radio::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.radio::-webkit-scrollbar-thumb:hover {
  background: $bg_color;
}
.radio::-webkit-scrollbar-corner {
  background: $bg_color;
}
</style>
